<template>
  <div class="bg-sci-bo pb-90px">
    <div class="sci-bo-top w-100vw py-9px px-9px flex items-center justify-center relative">
      <img src="@/assets/sic-bo/row.png" class="w-19px h-19px absolute left-9px" alt="">
      <p class="text-16px text='[#ffcdaa]' font-DIN' p-0 m-0">{{ roomNum }}</p>
    </div>
    <div class="w-371px h-234px pt-52px gamebox">
      <div ref="canvasContainer" class="w-100vw h-140px px-44px" id="canvas"></div>
    </div>
    <img src="@/assets/sic-bo/center.jpg" class="w-100vw h-15px mb-9px" alt="">
    <TimeBox />
    <BattingBox />
    <HistoryBox />
    <ControlBox />
  </div>
</template>

<script setup lang="ts">
import PixiEngine from "./systems/engine";
import TimeBox from "./components/timeBox.vue"
import BattingBox from "./components/bettingBox.vue"
import HistoryBox from "./components/historyBox.vue"
import ControlBox from "./components/controlBox.vue"

const canvasContainer = ref(null);
const roomNum = ref<string>('889');

onMounted(() => {
  const width = canvasContainer.value.offsetWidth;
  const height = canvasContainer.value.offsetHeight;
  let PixiEngineObj = new PixiEngine(width, height);
  const canvasInfo = PixiEngineObj.getCanvas();
  document.querySelector("#canvas")!.appendChild(canvasInfo as unknown as Node);
})
</script>
<style lang="less" scoped>
.gamebox {
  background: url('~/sic-bo/slot-machines-bg1.png') no-repeat top left / 100% 100%;
}

#canvas {
  overflow: hidden;

  canvas {
    // width: 100vw;
  }
}

.bg-sci-bo {
  background: linear-gradient(180deg, #5d307e 560px, #371d68);
  width: 100vw;
  height: 100%;
  position: relative;
}

.sci-bo-top {
  color: #ffcdaa;
}
</style>
